<template>
  <div>
    <div v-for="(item,index) in cartlist " :key="index" class="cart-item-wrapper">
      <div class="cart-item-input">
        <input type="checkbox" @click="getinpval(item)" :checked="item.checked" />
      </div>
      <div class="cart-item-img">
        <img :src="item.productImage" alt />
      </div>
      <div class="cart-item-title">
        <div class="cart-item-name">{{item.productName}}</div>
        <div style="color:red">￥{{item.salePrice |addcount}}</div>
        <div class="cart-item-num">
          <div @click="ninmusnum(item)">-</div>
          <div>{{item.num}}</div>
          <div @click="addnum(item)">+</div>
        </div>
      </div>
      <div class="cart-item-dele">
        <img src="../assets/dele.png" alt @click="dele(item)" />
      </div>
    </div>
    <div class="cart-item-btn">
      <div class="cart-item-btn-wrapper">
        <div>
          全选
          <input type="checkbox" :checked="allchecked" @click="all" />
        </div>
        <div>总量{{totalCount}}</div>
        <div>总价{{totalPrice |addcount}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import "../css/cart.css";
export default {
  methods:{
    // 单选
    getinpval(item){
      var str = event.target.checked;
      // window.console.log(str)
      // window.console.log(item)
      this.$store.dispatch("onechecked", { id: item._id, checked: str });
    },
    // 全选
    all(){
      var allinpval = event.target.checked;
      // window.console.log(allinpval)
      this.$store.dispatch("allclick", allinpval);
    },
    // 数量加
    addnum(item){
      this.$store.dispatch("addnums", item);
    },
    // 数量减
    ninmusnum(item){
      this.$store.dispatch("ninmusnums", item);
    },
    // 删除
    dele(item){
      this.$store.dispatch("deleone", item);
    }
  },
  computed:{
    cartlist: function(){
      return this.$store.state.cartitem;
    },
    allchecked: function(){
      return this.$store.state.allchecked;
    },
    totalCount: function(){
      return this.$store.state.totalCount;
    },
    totalPrice: function(){
      return this.$store.state.totalPrice;
    }
  },
  filters:{
    addcount: function(value){
      return value.toFixed(2);
    }
  }
};
</script>
<style>
</style>